<template>
   <div class="management-merchant views-container">
       <el-dialog  :visible.sync="dialogTableVisible" custom-class="reset-pwd wlm-form-dialog dialog-table" width="50%">
    <div class="wlm-form" v-if="dialogTableVisible">
      <div class="wlm-form-header wlm-dialog-fixheader">
        <span class="wlm-dialog-inlenr">修改地区</span>
      </div>
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="wlm-form-content">
          <div class="wlm-dialog-main">
            <div class="wlm-dialog-content">
              <el-form
                    :model="formFormatData.formData"
                    size="small"
                    label-width="120px"
                    class="retail-form"
                    label-position="right">
                <el-form-item label="地区等级">
                     <el-radio-group v-model="formFormatData.formData.level">
                    <el-radio :label="1">一级</el-radio>
                    <el-radio :label="2">二级</el-radio>
                    <el-radio :label="3">三级</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="运营地区">
                      <city-selects
                :config="initCityList"
                ref="cityselect"
                @on-change = "onchange"
                :level="formFormatData.formData.level"
                :changeEvt="formFormatFiltersChange"
              ></city-selects>
                </el-form-item>
            
              </el-form>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
         <!-- @click="formFormatSubmit"  -->
      <el-button size="small" @click="savebtn" type="primary">确认</el-button>
    </footer>
  </el-dialog>
    <div class="wlm-table">
        <!-- <div class="wlm-table-header">
            <el-form  size="small" label-width="80px" class="retail-form" label-position="right">
                <el-form-item class="filter">
                    <el-form-item label="商家名称：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.regionlist.files.keywords"  placeholder="请输入名称，手机号，真实姓名" style="width:300px;"></el-input>
                    </el-form-item>
                </el-form-item>
                 <el-form-item label="" class="filter-btns">
                    <el-button v-waves type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
     </div> -->
       <div class="wlm-table-content">
            <el-table :ref="tableFormatData.regionlist.key" :data="tableFormatData.regionlist.tableData" style="width: 100%">
                <el-table-column label="排序">
                    <template slot-scope="scope">
                        <el-input-number
                          style="width:100px;"
                          size="mini"
                          @change="sortbtn(scope.row.sort,scope.row.aid,scope.row.id)"
                          v-model="scope.row.sort"
                          :controls="false"></el-input-number>
                    </template>
                </el-table-column>
                 <el-table-column label="编码">
                    <template slot-scope="scope">
                      <span>{{scope.row.areaid}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.area_name}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="所属代理">
                    <template slot-scope="scope">
                      <!-- <el-tag type="success">{{scope.row.}}</el-tag> -->
                      <span>{{scope.row.agentname}}</span>
                    </template>
                </el-table-column>
                  <el-table-column label="是否开启">
                    <template slot-scope="scope">
                         <!-- @change="changeTableItem({id:scope.row.id,is_display:scope.row.is_display},tableFormatData.ListAll.change.sort)"  -->
                        <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.status" @change="bating(scope.row.status,scope.row.aid,scope.row.id)"> </el-switch>
                    </template>
                </el-table-column>
                  <el-table-column label="是否热门">
                    <template slot-scope="scope">
                         <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.ishot" @change="ishotbtn(scope.row.ishot,scope.row.aid,scope.row.id)"> </el-switch>
                    </template>
                </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button class="wlm-text" type="text" @click="editbtn(scope.row)">编辑地区</el-button>
                    </template>
                </el-table-column>
            </el-table>
               <div class="pagination-content flex-row flex-justify-e flex-align-c">
                   <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.regionlist.pagination.page" :page-sizes="tableFormatData.regionlist.pagination.pagesizes" :page-size.sync="tableFormatData.regionlist.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.regionlist.pagination.total : 0">
                </el-pagination>
                </div>
       </div>
    </div>
     
   </div>
</template>
<script>
import {getAreasList,saveArea } from '@/api/cityagent'
import CitySelects from '@/components/CitySelects/index'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'regionlist',
     components:{
    CitySelects
  },
  data () {
      return {
          initCityList: {
            initList: [
            ],
            bindKey: { key: [{ 'name': 'province', type: 'String' }, { 'name': 'city', type: 'String' }, { 'name': 'town', type: 'String' }], model: 'address' }
        },
          dialogTableVisible:false,
          formFormatData: {
              key: ['regionlist'],
              api: {
                editForm: {
                  filters: {
                    address: {
                      bindInit: ['initCityList']
                    },
                  }
                },
        },
        formData: {
          level:'',
          aid:'',
          id:'',
          province: {},
          city: {},
          town: {},
        },
       
      },
      tableFormatData: {
        current: 'regionlist',
        regionlist: {
          key: 'regionlist',
          api: {
            getList: getAreasList,
          },
          tableData: [],
          files: {
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
      }
  },
  created () {
       this.$nextTick(() => {
          //  this.getAreasListbtn()
       })
  },
  methods: {
    // levalbtn(val){
    //   this.formFormatFiltersChange()
    // },
    onchange(val){
      console.log("2121321fdshfdsfdfs",val)
      this.formFormatData.formData.province={
        id:val[0]
      }
      this.formFormatData.formData.city={
        id:val[1]
      }
      this.formFormatData.formData.town={
        id:val[2]
      }
    },
    bating(val,aid,id){
      console.log("fdsfdsfdfd",val)
      saveArea({status:val,aid:aid,id:id}).then(res=>{
        if(res.data.code==1){
          this.$message.success("操作成功！")
          this.filesSerch()
        }
      })
    },
    ishotbtn(ishot,aid,id){
         saveArea({ishot:ishot,aid:aid,id:id}).then(res=>{
       if(res.data.code==1){
          this.$message.success("操作成功！")
          this.filesSerch()
       }

      })
    },
    sortbtn(sort,aid,id){
       saveArea({sort:sort,aid:aid,id:id}).then(res=>{
       if(res.data.code==1){
          this.$message.success("操作成功！")
          this.filesSerch()
       }

      })
    },
      formFormatFiltersChange(data){
        console.log("dffgggg000000000000",data)
         this.formFormatData.formData.province = data[0]
         this.formFormatData.formData.city = data[1]
         this.formFormatData.formData.town = data[2]
      },
      editbtn(val){
          this.dialogTableVisible = true
           this.formFormatData.formData.aid = ""
           this.formFormatData.formData.id = ""
           this.formFormatData.formData.level = ""
            this.initCityList.initList = []
          this.formFormatData.formData.aid = val.aid
          this.formFormatData.formData.id = val.id
          this.formFormatData.formData.level = val.level

          this.formFormatData.formData.province=val.province_show
          this.formFormatData.formData.city=val.city_show
          this.formFormatData.formData.town=val.town_show
          console.log("fffffss",val.province_show,val.city_show,val.town_show)
        this.initCityList.initList.push(val.province_show,val.city_show,val.town_show)
        console.log("0.0.0.0..0.0.",this.initCityList.initList)
      },
       savebtn(){
          saveArea({level:this.formFormatData.formData.level,aid:this.formFormatData.formData.aid,
          id:this.formFormatData.formData.id,
          province:this.formFormatData.formData.province,
          city:this.formFormatData.formData.city,
          town:this.formFormatData.formData.town}).then(res=>{
            console.log("1525455sdfff",res)
            if(res.data.code==1){
              this.$message.success("操作成功！")
              this.dialogTableVisible=false
              this.filesSerch()
            }
          })
        },
      
  }

}
</script>
<style lang="scss" scoped>

</style>